<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shapes and fills</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Java, Java 2D, tutorial, shapes and fills, programming, Graphics, multiplatform">
<meta name="description" content="In this part of the Java 2D tutorial, we work with shapes and fills.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>


<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Shapes and fills</h1>


<p>
In this part of the Java 2D tutorial, we will create some basic and more 
advanced shapes. Then we will fill shapes with solid colors, gradients 
and textures.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<h2>Basic shapes</h2>

<p>
First we draw some basic Java 2D shapes. 
</p>

<div class="codehead">BasicShapes.java</div>
<pre class="code">
package com.zetcode;

import java.awt.Color;
import java.awt.Graphics;

import java.awt.Graphics2D;

import java.awt.RenderingHints;
import java.awt.geom.Ellipse2D;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class BasicShapes extends JPanel {

    public void paint(Graphics g) {

        Graphics2D g2d = (Graphics2D) g;

        g2d.setColor(new Color(150, 150, 150));

        RenderingHints rh = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
                RenderingHints.VALUE_ANTIALIAS_ON);


        rh.put(RenderingHints.KEY_RENDERING,
               RenderingHints.VALUE_RENDER_QUALITY);

        g2d.setRenderingHints(rh);

        g2d.fillRect(20, 20, 50, 50);
        g2d.fillRect(120, 20, 90, 60);
        g2d.fillRoundRect(250, 20, 70, 60, 25, 25);

        g2d.fill(new Ellipse2D.Double(10, 100, 80, 100));
        g2d.fillArc(120, 130, 110, 100, 5, 150);
        g2d.fillOval(270, 130, 50, 50);   
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Basic Shapes");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new BasicShapes());
        frame.setSize(350, 250);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
In this example, we draw six basic shapes of the Java 2D on the panel. 
A square, a rectangle, a rounded rectangle, an ellipse, an arc and a circle. 
</p>

<pre class="explanation">
g2d.fillRect(20, 20, 50, 50);
g2d.fillRect(120, 20, 90, 60);
</pre>

<p>
The <code>fillRect()</code> method is used to draw both a 
rectangle and a square. The first two parameters are 
x, y coordinates of a shape to be drawn. The last two parameters are 
the width and the height of the shape. 
</p>

<pre class="explanation">
g2d.fillRoundRect(250, 20, 70, 60, 25, 25);
</pre>

<p>
Here we create a rounded rectangle. The last two parameters are the horizontal 
and vertical diameters of the arc at the four corners.
</p>

<img src="/img/gfx/java2d/basicshapes.png" alt="Basic shapes">
<div class="figure">Figure: Basic shapes</div>


<h2>General path</h2>

<p>
More complex shapes can be constructed with a <code>GeneralPath</code> class. 
It represents a geometric path constructed from straight lines, 
and quadratic and cubic B&eacute;zier curves. 
</p>

<p>
In the next example, we will create a star with this class. 
</p>

<div class="codehead">Star.java</div>
<pre class="code">
package com.zetcode;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.GeneralPath;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

public class Star extends JPanel {

    double points[][] = { 
        { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
        { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
        { 40, 190 }, { 50, 125 }, { 0, 85 } 
    };


    public void paint(Graphics g) {
        super.paint(g);

        int h = getHeight();
        int w = getWidth();


        Graphics2D g2d = (Graphics2D)g;

        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                             RenderingHints.VALUE_ANTIALIAS_ON);

        g2d.setRenderingHint(RenderingHints.KEY_RENDERING,
                             RenderingHints.VALUE_RENDER_QUALITY);

        g2d.translate(25, 5);

        GeneralPath star = new GeneralPath();

        star.moveTo(points[0][0], points[0][1]);

        for (int k = 1; k &lt; points.length; k++)
            star.lineTo(points[k][0], points[k][1]);

        star.closePath();
        g2d.fill(star);
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Star");
        frame.add(new Star());
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(350, 250);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
We will create a star from a series of points.
</p>


<pre class="explanation">
double points[][] = { 
    { 0, 85 }, { 75, 75 }, { 100, 10 }, { 125, 75 }, 
    { 200, 85 }, { 150, 125 }, { 160, 190 }, { 100, 150 }, 
    { 40, 190 }, { 50, 125 }, { 0, 85 } 
};
</pre>

<p>
These are the coordinates of the star. 
</p>

<pre class="explanation">
GeneralPath star = new GeneralPath();
</pre>

<p>
Here we instantiate the GeneralPath class. 
</p>


<pre class="explanation">
star.moveTo(points[0][0], points[0][1]);
</pre>

<p>
We move to the initial coordinate of the GeneralPath.
</p>

<pre class="explanation">
for (int k = 1; k &lt; points.length; k++)
    star.lineTo(points[k][0], points[k][1]);
</pre>

<p>
Here we connect all the coordinates of the star. 
</p>

<pre class="explanation">
star.closePath();
g2d.fill(star);
</pre>

<p>
We close the path and fill the interior of the star. A new star is born. 
</p>


<img src="/img/gfx/java2d/star.png" alt="Star">
<div class="figure">Figure: Star</div>



<h2>Colors</h2>

<p>
The <code>Color</code> class is used to work with colors in Java 2D. 
To fill rectangles with the current color, we use the <code>fillRect()</code> method.
</p>

<div class="codehead">Colors.java</div>
<pre class="code">
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class Colors extends JPanel {

    public void paintComponent(Graphics g) {
        super.paintComponent(g); 

        Graphics2D g2d = (Graphics2D) g;

        g2d.setColor(new Color(125, 167, 116));
        g2d.fillRect(10, 15, 90, 60);

        g2d.setColor(new Color(42, 179, 231));
        g2d.fillRect(130, 15, 90, 60);

        g2d.setColor(new Color(70, 67, 123));
        g2d.fillRect(250, 15, 90, 60);

        g2d.setColor(new Color(130, 100, 84));
        g2d.fillRect(10, 105, 90, 60);

        g2d.setColor(new Color(252, 211, 61));
        g2d.fillRect(130, 105, 90, 60);

        g2d.setColor(new Color(241, 98, 69));
        g2d.fillRect(250, 105, 90, 60);

        g2d.setColor(new Color(217, 146, 54));
        g2d.fillRect(10, 195, 90, 60);

        g2d.setColor(new Color(63, 121, 186));
        g2d.fillRect(130, 195, 90, 60);

        g2d.setColor(new Color(31, 21, 1));
        g2d.fillRect(250, 195, 90, 60);

    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Colors");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Colors());
        frame.setSize(360, 300);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
In the example we draw nine colored rectangles. 
</p>

<pre class="explanation">
g2d.fillRect(10, 15, 90, 60);
</pre>

<p>
To fill the rectangle with a color, we use the <code>fillRect()</code> method.
</p>


<img src="/img/gfx/java2d/colors.png" alt="Colors">
<div class="figure">Figure: Colors</div>


<h2>Gradients</h2>


<p>
In computer graphics, gradient is a smooth blending of shades from light to 
dark or from one color to another. In 2D drawing programs and paint programs, 
gradients are used to create colorful backgrounds and special effects as well 
as to simulate lights and shadows. (answers.com)
</p>

<div class="codehead">Star.java</div>
<pre class="code">
package com.zetcode;

import java.awt.Color;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class Gradients extends JPanel {

    public void paint(Graphics g) {
        super.paint(g); 

        Graphics2D g2d = (Graphics2D) g;

        GradientPaint gp1 = new GradientPaint(5, 5, 
            Color.red, 20, 20, Color.black, true);

        g2d.setPaint(gp1);
        g2d.fillRect(20, 20, 300, 40);

        GradientPaint gp2 = new GradientPaint(5, 25, 
            Color.yellow, 20, 2, Color.black, true);

        g2d.setPaint(gp2);
        g2d.fillRect(20, 80, 300, 40);

        GradientPaint gp3 = new GradientPaint(5, 25, 
     	    Color.green, 2, 2, Color.black, true);

        g2d.setPaint(gp3);
        g2d.fillRect(20, 140, 300, 40);

        GradientPaint gp4 = new GradientPaint(25, 25, 
  	    Color.blue, 15, 25, Color.black, true);

        g2d.setPaint(gp4);
        g2d.fillRect(20, 200, 300, 40);

        GradientPaint gp5 = new GradientPaint(0, 0, 
   	     Color.orange, 0, 20, Color.black, true);

        g2d.setPaint(gp5);
        g2d.fillRect(20, 260, 300, 40);
    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Gradients");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Gradients());
        frame.setSize(350, 350);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
Our code example presents five rectangles with gradients. 
</p>

<pre class="explanation">
GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true);
</pre>

<p>
To work with gradients, we use the <code>GradientPaint</code> class. By manipulating the 
color values and the starting end ending points, we can get interesting results.
</p>

<pre class="explanation">
g2d.setPaint(gp5);
</pre>

<p>
The gradient is activated calling the <code>setPaint()</code> method.
</p>


<img src="/img/gfx/java2d/gradients.png" alt="Gradients">
<div class="figure">Figure: Gradients</div>


<h2>Textures</h2>

<p>
A texture is a bitmap image applied to a shape.
To work with textures in Java 2D, we use the <code>TexturePaint</code> class.
</p>

<div class="codehead">Textures.java</div>
<pre class="code">
package com.zetcode;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import java.awt.TexturePaint;
import java.awt.image.BufferedImage;

import java.io.IOException;

import javax.imageio.ImageIO;

import javax.swing.JFrame;
import javax.swing.JPanel;


public class Textures extends JPanel {

    BufferedImage slate;
    BufferedImage java;
    BufferedImage pane;

    TexturePaint slatetp;
    TexturePaint javatp;
    TexturePaint panetp;


    public Textures() {

        try {
            slate = ImageIO.read(this.getClass().getResource("slate.png"));
            java = ImageIO.read(this.getClass().getResource("java.png"));
            pane = ImageIO.read(this.getClass().getResource("pane.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void paintComponent(Graphics g) {
            super.paintComponent(g); 

            Graphics2D g2d = (Graphics2D) g;

            slatetp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60));
            javatp = new TexturePaint(java, new Rectangle(0, 0, 90, 60));
            panetp = new TexturePaint(pane, new Rectangle(0, 0, 90, 60));

            g2d.setPaint(slatetp);
            g2d.fillRect(10, 15, 90, 60);

            g2d.setPaint(javatp);
            g2d.fillRect(130, 15, 90, 60);

            g2d.setPaint(panetp);
            g2d.fillRect(250, 15, 90, 60);

    }

    public static void main(String[] args) {

        JFrame frame = new JFrame("Textures");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(new Textures());
        frame.setSize(360, 120);
        frame.setLocationRelativeTo(null);
        frame.setVisible(true);
    }
}
</pre>

<p>
In the code example, we fill three rectangles with three different textures. 
</p>

<pre class="explanation">
slate = ImageIO.read(this.getClass().getResource("slate.png"));
</pre>

<p>
Here we read the image into the buffered image.
</p>

<pre class="explanation">
slatetp = new TexturePaint(slate, new Rectangle(0, 0, 90, 60));
</pre>

<p>
We create a <code>TexturePaint</code> class out of the buffered image.
</p>

<pre class="explanation">
g2d.setPaint(slatetp);
g2d.fillRect(10, 15, 90, 60);
</pre>

<p>
We fill a rectangle with a texture.
</p>


<img src="/img/gfx/java2d/textures.png" alt="Textures">
<div class="figure">Figure: Textures</div>


<p>
In this part of the Java 2D tutorial, we have covered some basic and 
more advanced shapes of the Java 2D library.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified November 24, 2008  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


